<template>
  <div>
    <img @click="collapseBtn" :src="collapseUrl" alt="" />
    <div v-show="isActive">
      <collapse><slot name="collap"></slot></collapse>
    </div>
  </div>
</template>
<script>
import collapse from "@/utils/collapse.js";
export default {
  name: "ToggleFold",
  components: {
    collapse,
  },
  data() {
    return {
      isActive: false,
      collapseUrl: "",
    };
  },
  created() {},
  mounted() {},
  watch: {
    isActive: {
      handler(val) {
        if (val == true) {
          this.collapseUrl = require("../../assets/less.png");
        } else {
          this.collapseUrl = require("../../assets/more.png");
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**折叠、展开按钮 */
    collapseBtn() {
      this.isActive = !this.isActive;
    },
  },
};
</script>
<style lang="scss" scoped>
img {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 30px;
  right: 30px;
}
</style>
